<template>
	<view>
		<view class="header">
			<view class="arrow" @tap="$back()">
				<image class="lefts" src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
			</view>
			<view class="tit f36 cfff">签到</view>
			<view class="btn f32 cfff btn-plain-primary btn-radius" @tap="$open('../footprint/footprint')">
				<text>足迹</text>
			</view>
		</view>
		<!-- 地图 -->
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		<view class="sign_one content">
			<text>{{date}}</text>
			<text class="qd">今日未签到</text>
		</view>
		<!-- 签到 -->
		<view class="sign_item">
			<view class="sign_two" @tap="$open('../addSign/addSign')">
				<view class="time">{{time}}</view>
				<text class="sign_qd">签到</text>
			</view>
		</view>
		<view class="sign_three">
			<view class="set-1">
				<view class="set-2">
					<view class="sign_ite">
						<view class="sign_three_item">
							<text>17:26</text>
							<text>江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都 某黄裳</text>
						</view>
						<view class="">
							<image src="../../../static/images/201916541220.jpg" mode=""></image>
						</view>
					</view>

				</view>
				<view class="set-2">
					<view class="sign_ite">
						<view class="sign_three_item">
							<text>17:26</text>
							<text>江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都 某黄裳</text>
						</view>
						<view class="">
							<image src="../../../static/images/201916541220.jpg" mode="aspectFill"></image>
						</view>
					</view>

				</view>
				<view class="set-2">
					<view class="sign_ite">
						<view class="sign_three_item">
							<text>17:26</text>
							<text>江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都江苏省徐州市鼓楼区街道某某首都 某黄裳</text>
						</view>
						<view class="">
							<image src="../../../static/images/201916541220.jpg" mode="aspectFill"></image>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import {
		formateDate,
		pointInsideCircle,
		isSameDay
	} from "@/common/util.js"
	import {
		handleSignClick,
		setSignInfo,
		addSignInfo,
		getSignInfo,
		delSignInfo,
		getInfo,
		key
	} from "@/common/indexs.js"
	export default {
		data() {
			return {
				time: formateDate(new Date(), 'h:min:s'),
				date: new Date().toISOString().slice(0, 10),
				showCenterVisible: false,
				// id: 0, // 使用 marker点击事件 需要填写id
				// title: 'map',
				marker: [{
					id: 0,
					latitude: 40.013305, //纬度
					longitude: 118.685713, //经度
					iconPath: '', //显示的图标        
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 20, //高
					title: '你在哪了', //标注点名
					alpha: 0.5 ,//透明度
					label: { //为标记点旁边增加标签   //因背景颜色H5不支持
						content: '唐山迁安', //文本
						color: 'red', //文本颜色
						// 　　fontSize:24,//文字大小
						//    x:5,//label的坐标，原点是 marker 对应的经纬度
						//    y:1,//label的坐标，原点是 marker 对应的经纬度 
						//    borderWidth:12,//边框宽度
						//    borderColor:'pink',//边框颜色    
						// 　　borderRadius:20,//边框圆角                        
						// 　　bgColor:'black',//背景色
						// 　　padding:5,//文本边缘留白
						//    textAlign:'right'//文本对齐方式。
					},
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '幸福花园店A组', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 2, //边框圆角
						bgColor: '#00c16f', //背景颜色
						display: 'ALWAYS', //常显
					},
					// anchor:{//经纬度在标注图标的锚点，默认底边中点
					//     x:0,    原点为给出的经纬度
					//     y:0,
					// }

				}],
			};

		},
		onLoad() {
			this.getTime()
		},
		methods: {
			getTime() {
				var that = this;
				setInterval(function() {
					that.time = formateDate(new Date(), 'h:min:s')
				}, 1000)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	@import url("//at.alicdn.com/t/font_1337773_robb7hmlk9o.css");

	.header {
		flex-direction: row;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #249AF6;
		padding: 0 20rpx 0 20rpx;
		margin-top: 50rpx;

		.lefts {
			width: 40rpx;
			height: 40rpx;
		}

		.rights {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.page-section {
		height: 420rpx;

		map {
			width: 100%;
			height: 100%;
		}
	}

	.sign_one {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 29rpx;
		height: 72rpx;
		font-size: 30rpx;
		border-bottom: 1px solid #F5F5F5;

		.qd {
			color: #3399FF;
			font-size: 28rpx;
		}
	}

	.sign_item {
		height: 277rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.sign_two {
			width: 150rpx;
			height: 150rpx;
			background: red;
			background: linear-gradient(0deg, rgba(55, 159, 243, 1), rgba(21, 137, 228, 1));
			border-radius: 50%;

			.time {
				color: #fff;
				font-size: 32rpx;
				position: relative;
				top: 40rpx;
				left: 10rpx;
			}

			.sign_qd {
				color: #fff;
				font-size: 32rpx;
				margin-left: 40rpx;
				position: relative;
				top: 40rpx;
			}
		}
	}

	.sign_three {
		background: #F5F5F5;

		.set-1 {
			padding: 28rpx 30rpx 0 30rpx;
		}

		.set-2 {

			background-color: #fff;
			height: 173rpx;
			border-radius: 10rpx;
			width: 631rpx;
			margin-left: 50rpx;
			margin-top: 14rpx;
			position: relative;
			margin-bottom: 21px;

			.sign_ite {
				display: flex;
				align-items: center;
				padding: 30rpx;

				.sign_three_item text {
					display: block;
					font-size: 28rpx;
					color: #656565;
					display: block;
					width: 500rpx;
					overflow: hidden;
					word-break: break-all;
					/* break-all(允许在单词内换行。) */
					text-overflow: ellipsis;
					/* 超出部分省略号 */
					display: -webkit-box;
					/** 对象作为伸缩盒子模型显示 **/
					-webkit-box-orient: vertical;
					/** 设置或检索伸缩盒对象的子元素的排列方式 **/
					-webkit-line-clamp: 2;
					/** 显示的行数 **/
				}

				image {
					width: 94rpx;
					height: 94rpx;
				}
			}

		}

		@font-face {
			font-family: "iconfont";
			src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
			/* IE9 */
			src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
				/* IE6-IE8 */
				url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
				url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
				url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
				/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
				url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
			/* iOS 4.1- */
		}

		.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon-yuandian:before {
			content: "\e64d";
		}

		.icon-dingweiweizhi:before {
			content: "\e619";
		}

		.set-2::before {
			content: "\e619";
			/* 必须存在如果没有图标就留空 */
			color: #c6c6c6;
			/* 设置颜色 */
			position: absolute;
			/* 定位 */
			left: -70rpx;
			/* 移动到左边 */
			font-weight: bold;
			/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
			font-family: "iconfont" !important;
			/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
			font-size: 54upx;
			/* 图标大小 */
			font-style: normal;
			/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
			-webkit-font-smoothing: antialiased;
			/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
			-moz-osx-font-smoothing: grayscale;
			/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		}

		.set-2::after {
			content: '';
			/* 必须存在如果没有图标就留空 */
			top: 34%;
			/* 定位 距离*/
			border-left: #c6c6c6 1px solid;
			/* 横线颜色 */
			left: -44rpx;
			/* 定位 距离*/
			height: 100%;
			/* 高度 */
			position: absolute;
			/* 定位 */
		}

		.set-2:last-child::after {
			display: none;
		}
	}
</style>
